<template>


  <div>

    <mu-paper class="remind">

      <h2>官方文档 <a href="https://quilljs.com/docs/quickstart/">github</a></h2>
      <p>
        <span>配合 element-ui 实现上传图片/视频到七牛</span>
        <a href="https://github.com/surmon-china/vue-quill-editor/issues/102" target="_blank">
        demo
        </a>
      </p>

       <p>
        <span>图片拖拽上传</span>
        <a href="https://github.com/kensnyder/quill-image-drop-module" target="_blank">
          文档
        </a>
      </p>

      <p>
        <span>图像自适应</span>
        <a href="https://github.com/kensnyder/quill-image-resize-module">
          文档
        </a>
      </p>

    </mu-paper> 
  
    <mu-paper class="editor-wrap">
      <!-- bidirectional data binding（双向数据绑定） -->
      <quill-editor v-model="content"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @ready="onEditorReady($event)">
      </quill-editor>
    </mu-paper> 

  </div>

  
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'



export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content:  `
      <h1 style="text-align: center;">vue-quill-editor</h1>
      <p style="text-align: center; font-size: 15px;margin-top:200px">
       <img title="TinyMCE Logo" src="../../../../static/women.jpg" alt="TinyMCE Logo" width="140" height="230" />
      </p>
      `,
      editorOption: {
        // some quill options
      }
    }
  },
  methods: {
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
      console.log(this.content,'content')
    },
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
 

}
</script>

<style>

.editor-wrap .ql-container {
  min-height: 360px;
}

</style>

<style scoped>

.editor-wrap{
  background-color: #fff;
}
.remind {
  margin: 20px 0 30px 0;
  padding: 20px 30px;
}

.remind h2,.remind p {
  line-height: 2.5;
}

.remind a {
  color: rgb(155, 43, 33);
  margin-left: 30px;
}
</style>
